<template>
    <div>
        <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item >
                <span>打卡</span>
                <template #icon="props">
                    <img :src="props.active ? require('@/assets/imgs/clock-c.png') : require('@/assets/imgs/clock-s.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="search">
                <span>申请</span>
                <template #icon="props">
                    <img :src="props.active ? require('@/assets/imgs/apply-c.png') : require('@/assets/imgs/apply-s.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item icon="friends-o">
                <span>统计</span>
                <template #icon="props">
                    <img :src="props.active ? require('@/assets/imgs/atten-c.png') : require('@/assets/imgs/atten-s.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
export default {
    props:{
        nowIndex:{
            type:Number,
            default:0
        }
    },
    data(){
        return{
            active:this.nowIndex
        }
    },
    mounted(){

    },
    methods:{
        onChange(index) {
            if(index == this.nowIndex){
                return false;
            }
            if(index == 0){
                this.$router.replace('/clock')
            }else if(index == 1){
                this.$router.replace('/apply')
            }else if(index == 2){
                this.$router.replace('/attendance')
            }
        },
    }
}
</script>
<style lang="less" scoped>

</style>




